<template>
  <div>
    <public-header-2></public-header-2>
    <div id="bodyMsg">
      <el-row id="head">
        <el-col :span="6">
          <span>1 选择商品</span>
          <div class="sanGray"></div>
        </el-col>
        <el-col :span="6">
          <span>2 确认订单信息</span>
          <div class="sanRed"></div>
        </el-col>
        <el-col :span="6">
          <span>3 支付订单</span>
        </el-col>
        <el-col :span="6">
          <span>4 收取商品</span>
        </el-col>
      </el-row>
      <order-yes-com>
        <div slot="info" class="info" style="float: left">
          <span>购票人：</span>
          <el-button type="danger">选择购票人</el-button>
        </div>
      </order-yes-com>
      <order-yes-com title="选择付款方式">
        <div slot="info" class="info">
          <el-radio class="radio" v-model="radio" label="网上付款"
            >网上付款</el-radio
          >
        </div>
      </order-yes-com>
      <order-yes-com title="商品清单" size="24">
        <div slot="info" class="info">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="proName" label="商品名称" width="380">
            </el-table-column>
            <el-table-column prop="seatNum" label="座位号" width="180">
            </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="num" label="数量"> </el-table-column>
            <el-table-column prop="priceSmall" label="价格小计（元）">
            </el-table-column>
          </el-table>
        </div>
      </order-yes-com>
      <order-yes-com title="我要开发票" size="24">
        <el-tabs slot="info" class="info" v-model="activeName">
          <el-tab-pane label="公司" name="first">
            <el-form
              class="form"
              size="medium"
              ref="form"
              :model="form"
              label-width="90px"
            >
              <el-form-item label="公司抬头：">
                <el-input
                  placeholder="请输入公司抬头"
                  style="width: 400px; float: left"
                  v-model="form.name"
                ></el-input> </el-form-item
              ><el-form-item label="公司税号：">
                <el-input
                  placeholder="请输入公司税号"
                  style="width: 400px; float: left"
                  v-model="form.name"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="float: left; margin-top: 20px; margin-bottom: 20px"
                  type="danger"
                  >确认发票信息</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人" name="second">个人</el-tab-pane>
        </el-tabs>
      </order-yes-com>
      <el-row>
        <el-col
          :span="24"
          style="border-bottom: 2px solid #dadada; line-height: 30px"
        >
          <span style="opacity: 0">1</span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :span="6" :offset="18" class="anxin">
          <el-checkbox style="float: right" v-model="checked1"
            >购买"安心订票保险"，本单保票金额：20.00元</el-checkbox
          >
          <p style="margin-top: 25px">
            查看 保险服务说明 和 《安心订票保险条款》
          </p>
          <p>购买保险，请填写真实姓名</p>

          <p>商品金额： <span>¥ 180</span></p>
          <p>商品保险： + <span>¥ 20.00</span></p>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="24"
          style="border-bottom: 2px solid #dadada; line-height: 30px"
        >
          <span style="opacity: 0">1</span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px; margin-bottom: 100px">
        <el-col :span="6" :offset="18" class="anxin">
          <p style="font-weight: bold; margin-bottom: 10px">
            待支付总金额： <span>¥ 200</span>
          </p>
          <el-checkbox style="float: right" v-model="checked2"
            >我已阅读并同意《订购服务条款》 《退换货约定》
            《退款约定》</el-checkbox
          >
          <p style="margin-top: 35px">
            同意"票品为不记名凭证"，请您妥善保管，遗失不补
          </p>
          <el-button @click="toPay" style="margin-top: 30px" type="danger"
            >同意以上协议并提交订单</el-button
          >
        </el-col>
      </el-row>
    </div>
    <public-footer></public-footer>
    
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import orderYesCom from "../components/orderYesCom.vue";
import publicFooter from "../components/publicFooter.vue";
import publicHeader2 from "../components/publicHeader2.vue";
export default {
  name: "orderYes",
  components: {
    publicHeader2,
    orderYesCom,
    publicFooter,
  },
  data() {
    return {
      radio: "网上付款",
      tableData: [
        {
          proName: "大型多媒体互动儿童剧《奇门遁甲》（11月）",
          seatNum: "1座3号",
          price: "90",
          num: "1",
          priceSmall: "90",
        },
        {
          proName: "大型多媒体互动儿童剧《奇门遁甲》（11月）",
          seatNum: "1座4号",
          price: "90",
          num: "1",
          priceSmall: "90",
        },
      ],
      activeName: "first",
      form: {
        tai: "",
        shui: "",
      },
      checked1: false,
      checked2: false,
    };
  },
  methods: {
    toPay() {
      this.$router.push({ name: "orderPay" });
    },
  },
};
</script>

<style scoped>
#bodyMsg {
  width: 80%;
  margin: 0 auto;
  /* border: 1px solid red; */
  background-color: white;
  padding: 15px;
}
/**选座头部三部分 */
#head .el-col {
  /* border: 1px solid blue; */
  height: 50px;
  background-color: #414141;
}
#head .el-col:nth-of-type(2) {
  background-color: #d8000b;
  height: 52px;
  margin-top: -1px;
}
#head .el-col span {
  line-height: 50px;
  color: white;
}
.sanGray {
  border-top: 25px solid transparent;
  border-left: 40px solid #414141;
  border-bottom: 25px solid transparent;
  position: relative;
  top: -50px;
  left: 304px;
}
.sanRed {
  border-top: 26.5px solid transparent;
  border-left: 45px solid #d8000b;
  border-bottom: 26.5px solid transparent;
  position: relative;
  top: -50px;
  left: 304px;
}
.info {
  margin-top: 20px;
}
.radio {
  float: left;
}
.form {
  padding-top: 10px;
  border: 1px solid #dadada;
  margin-top: -1px;
  padding-left: 10px;
}
.anxin p {
  font-size: 13px;
  /* float: right; */
  text-align: right;
  margin-top: 10px;
}
.anxin p span {
  color: #ff3d1c;
}
</style>